<template>
  <div>
    <!-- 商品图片放置区域 -->
    <el-upload
      :action="uploadActionUrl"
      :file-list="fileList"
      list-type="picture-card"
      :headers="uploadActionHeader"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
    <!-- 预览图片的对话框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 预览图片对话框的图片路径
      dialogImageUrl: '',
      // 控制预览图片对话框的显示与隐藏
      dialogVisible: false,
      // 商品图片、二维码id
      picId: 0,
      // 商品图片数组
      fileList: [],
      // 用于暂时存放返回的图片的图片id
      CommodityImagesId: []
    }
  },
  // 钩子
  created () {
    // 获取所有商品图片
    this.getSlideshow()
  },
  // 计算属性
  computed: {
    // 商品图片上传api接口需要token验证
    uploadActionHeader () {
      return {
        Authorization: 'Bearer ' + window.sessionStorage.getItem('token')
      }
    },
    // 商品图片上传的api地址
    uploadActionUrl () {
      const baseUrl = 'https://api.h1234.top/'
      const uploadUrl = 'files/uploadfiles'
      return baseUrl + uploadUrl
    }
  },
  methods: {
    // 获取所有的商品图片
    async getSlideshow () {
      const editGoodsId = this.$route.query.goodsId
      if (editGoodsId) {
        // 编辑
        const { data: res } = await this.$http.get(`Commodities/id/${editGoodsId}`)
        // 字符串传数字数组
        const imgs = res.data.commodities.commodityImagesId.split(',').map(Number)
        if (res.meta.status !== 200) {
          // 获取商品图片失败
          this.$message.error('商品图片获取失败！')
        } else {
          // 获取商品图片成功
          // 将获取到的商品图片数据赋值到商品图片数组中
          for (let index = 0; index < imgs.length; index++) {
            const obj = {
              url: 'https://api.h1234.top/files/' + imgs[index]
            }
            this.fileList.push(obj)
          }
        }
      } else {
        // 添加
      }
    },
    // 移除商品图片
    async handleRemove (file) {
      // 截取file中url的的picId
      const pId = file.url.slice(28) - 0
      // 通过picId查询Id
      const { data: result } = await this.$http.get('CommodityPics/picId/' + pId)
      // 获取id
      const id = result.data.id
      // 根据id进行删除
      const { data: res } = await this.$http.delete('CommodityPics/' + id)
      // 判断是否删除成功
      if (res.meta.status !== 200) {
        // 删除图片失败
        this.$message.error('商品图片删除失败！')
      } else {
        // 将所要删除的图片Id从CommodityImagesId数组中移除
        const i = this.CommodityImagesId.indexOf(id)
        this.CommodityImagesId.splice(i, 1)
        // 删除图片成功
        this.$message.success('商品图片删除成功！')
      }
    },
    // 预览图片
    handlePictureCardPreview (file) {
      // 需要预览的图片路径
      this.dialogImageUrl = file.url
      // 显示预览图片的对话框
      this.dialogVisible = true
    },
    // 图片上传前的钩子函数，用于检测上传文件的大小、类型等
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传商品图片只能是 JPG 或 PNG 格式！')
      }
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB！')
      }
      return (isJPG || isPNG) && isLt2M
    },
    // 商品图片上传成功后调用的方法
    async handleAvatarSuccess (res, file) {
      const fullPath = URL.createObjectURL(file.raw)
      this.picId = res.data[0].id
      this.dialogFormFullUrl = fullPath
      const { data: result } = await this.$http.post('CommodityPics',
        {
          picId: this.picId
        })
      if (result.meta.status !== 200) {
        // 上传商品图片失败
        this.$message.error('商品图片上传失败！')
      } else {
        // 上传商品图片成功
        // 将返回的图片id存到CommodityImagesId数组中
        this.CommodityImagesId.push(result.data.picId)
        // 子组件向父组件传值
        this.$emit('commodity-images', this.CommodityImagesId)
        this.$message.success('商品图片上传成功！')
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
